<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="pc/include :: header('专题')" />

    <link th:href="@{/js/ui-table/ui-table.css}" rel="stylesheet"/>
</head>
<body>
<th:block th:include="pc/include :: top" />
<div class="iw">
    <div class="crumbs">
        <p>当前位置：<a href="/">首页</a> > <a href="/topic.html">专题列表</a> > <a href="#" th:text="${topic.title}"></a></p>
    </div>
    <div class="topic-left">
        <div class="topic-view">
           <img th:src="${topic.cover}" />
           <div>
                <h2><a href="#" th:text="${topic.title}"></a></h2>
                <div class="user-tip-p">
                    <a href="#" th:text="${topic.nickname}">
                        <img th:src="${topic.photo}" />
                    </a>

                </div>
                <span class="time"><span th:text="${topic.insertdate}" th:remove="tag"></span> 创建</span>
                <i class="fa fa-heart fa-lg" th:classappend="${fav_state}?'active'"></i>
                <p><span>分类 ：</span><a href="#" th:text="${topic.typename}"></a></p>
                <div class="downpay">
                    <h5>大小：<span th:text="${topic.size}" th:remove="tag"></span></h5>
                    <h5>总价：<s th:text="|${systradesets.glodname}${topic.totalpay}${systradesets.glodunit}|"></s></h5>
                    <span><span th:text="|${systradesets.glodname}${topic.downpay2}${systradesets.glodunit}|" th:remove="tag"></span> 打包下载</span>
                </div>
            </div>
        </div>
        <p  class="topic-word"><span>简介 ：<span th:text="${topic.word}" th:remove="tag"></span></span></p>
        <div class="topic-pannel">
            <ul>
                <li class="lidoc active">文档列表（<span th:text="${#arrays.length(docs)}" th:remove="tag"></span>）</li>
                <li class="licom">评论（<span th:text="${total}" th:remove="tag"></span>）</li>
                <li class="lidown">下载（<span th:text="${#arrays.length(downlogs)}" th:remove="tag"></span>）</li>
            </ul>
            <div class="topic-doclist" style='display: block'>
                <ul>
                    <li th:each="doc :${docs}">
                        <i class="rb" th:classappend="${doc.exten}"></i>
                        <a th:href="@{/detail.htm(docid=${doc.docid})}" th:text="${doc.title}" target="_blank"><?php echo $doc->title ?></a>
                        <span>(<span th:text="${doc.pcount}" th:remove="tag"></span>页)</span>
                        <span class="fr" th:text="${doc.insertdate}"></span>
                    </li>

               </ul>
            </div>
            <div class="topic-comment">
                <div class="comment-body" >

                    <ul th:if="comments!=null">
                        <li th:each="comment, userStat : ${comments}">
                            <div class="user-photo user-tip-p">
                                <a href="#"><img th:src="${comment.photo}" /></a>

                            </div>
                            <div class="comment-info">
                                <ul class="comment-head">
                                    <li><a href="#" th:text="${comment.nickname}"></a></li>
                                    <li>发表于
                                        <span th:text="${comment.insertdate}" th:remove="tag"></span>
                                    </li>
                                    <li class="last">
                                       <span th:if="${userStat.index}==0" class="shafa">沙发</span><span th:if="${userStat.index}==1" class="bandeng">板凳</span><span th:if="${userStat.index}==2" class="diban">地板</span>
                                    </li>
                                </ul>

                                <blockquote th:if="${comment.sysTopicComment}!=null">
                                    <span th:text="${comment.sysTopicComment.nickname}" th:remove="tag"></span> 发表于
                                    <span th:text="${comment.sysTopicComment.insertdate}" th:remove="tag"></span>
                                    <div th:utext="${comment.sysTopicComment.comment}">

                                    </div>
                                </blockquote>

                                <div th:utext="${comment.comment}">

                                </div>
                                <ul class="comment-foot">

                                    <li th:if="${user.userid}==${comment.userid}"><a th:attr="submit-url=${comment.note}">删除</a></li>


                                    <li th:if="${user.userid}==${comment.userid}"><a th:href="@{/topic/commentedit.html(commentid=${comment.commentid})}">编辑</a></li>
                                    <li th:if="${user.userid}==${comment.userid}"><a th:href="@{/topic/replyadd.html(commentid=${comment.commentid})}">评论</a></li>
                                    <li><a th:attr="modal-form=${comment.report}">举报</a></li>
                                </ul>
                            </div>
                        </li>
                    </ul>
                    <div class="pages"></div>

                    <p th:if="${#lists.size(comments)} eq 0" class="nodata">暂时没有评论,评论一个吧?</p>
                </div>

                <div class="comment-post">
                    <div th:if="${member.groupid}>0" th:remove="tag">
                        <div th:if="${iscommentadd}">
                            <script type="text/javascript">
                                var ctxPath= "[[${#httpServletRequest.getContextPath()}]]";
                                window.CTX = ctxPath;
                            </script>
                       <script id="editor" name='word' type="text/plain"></script>
                        <link type="text/css" th:href="@{/js/ui-editor/ui-editor.css}" rel="stylesheet" />
                        <script type="text/javascript" charset="utf-8" th:src="@{/js/neditor/neditor.config.js}"></script>
                        <script type="text/javascript" charset="utf-8" th:src="@{/js/neditor/neditor.all.js}"></script>
                        <script>
                            var ue = UE.getEditor('editor', {
                                initialFrameHeight: 200,
                                initialFrameWidth: '100%',
                                serverUrl:  window.CTX + "/ueditor/config",
                                elementPathEnabled: false,
                                toolbars: [
                                    [
                                        'fullscreen', 'source', '|', 'undo', 'redo', '|',
                                        'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
                                        'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
                                        'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
                                        'directionalityltr', 'directionalityrtl', 'indent', '|',
                                        'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
                                        'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
                                        'simpleupload', 'insertimage', 'emotion', 'scrawl', 'insertvideo', 'music', 'attachment', 'map', 'gmap', 'insertframe', 'insertcode', 'webapp', 'pagebreak', 'template', 'background', '|',
                                        'horizontal', 'date', 'time', 'spechars', 'snapscreen', 'wordimage', '|',
                                        'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts', '|',
                                        'print', 'preview', 'searchreplace', 'drafts', 'help'
                                    ]
                                ]
                            });
                        </script>


                        <div class="btn">发表评论</div>
                        </div>
                            <p th:if="${!iscommentadd}">您暂时没有限发表评论的权限</p>

                    </div>
                    <p th:if="${member.groupid==0}" >
                        您需要登录后才能评论 , <a href="javascript:login_f()">去登录</a>
                    </p>

                </div>    
            </div>
            <div class="topic-downlist">
                <ul>

                    <li th:each="downlog, index : ${downlogs}">
                        <a href="#">
                            <img th:src="${downlog.photo}" />
                            <span th:text="${downlog.nickname}"></span>
                        </a>
                        <span class="fr" th:text="${downlog.insertdate}"></span>
                    </li>

                </ul>
            </div> 
        </div>    
    </div>
    <div class="topic-right">
        <div class="info-tag">
            <p>专题分类</p>
            <div th:if="${types!=null}">
            <ul>
                <li th:each="type, index : ${types}"><a th:href="@{/topic.html(tid=${type.typeid})}" th:text="${type.typename}"></a></li>
            </ul>
            </div>

        </div>

        <a th:if="${user.groupid}>0" class="info-pub-a" href="/pub.html">创建专题</a>

        <a th:if="${user}==null" class="info-pub-a" href="javascript:login_f()">创建专题</a>

    </div>
</div>
<th:block th:include="pc/include :: footer" />
<script>
    $(".pages").html(CreatPage('[(${cpage})]', '[(${pagesize})]', '[(${total})]', "/topic/[(${topic.topicid})]?pageNum={PageCurrent}&pageSize=10"));

        $(".fa-heart").click(function() {
            if([(${user.groupid})]==0) {
                login_ok = function(){
                    location.href = location.href;
                }
                login_f();
            } else {             
                $.get("/topic/favorite/[(${topic.topicid})]", function(data) {
                    if (data == -1) {
                        login_f();
                    } else {
                        $(".fa-heart").toggleClass("active");
                    }
                });
            }    
        });
        

    $(".topic-pannel li.lidoc").click(function() {
        $(".topic-pannel li").removeClass("active");
        $(".topic-pannel > div").hide();
        $(this).addClass("active");
        $(".topic-pannel .topic-doclist").show();
    });

    $(".topic-pannel li.licom").click(function() {
        $(".topic-pannel li").removeClass("active");
        $(".topic-pannel > div").hide();
        $(this).addClass("active");
        $(".topic-pannel .topic-comment").show();
    });

    $(".topic-pannel li.lidown").click(function() {
        $(".topic-pannel li").removeClass("active");
        $(".topic-pannel > div").hide();
        $(this).addClass("active");
        $(".topic-pannel .topic-downlist").show();
    });
    
    $(".downpay span").click(function() {
        if('[(${topic.downpay2})]'=='0.0') {
            paydown();
        } else {
            $.get("/readpay.htm?docid=[(${topic.topicid})]&readpay=[(${topic.downpay})]&readpay2=[(${topic.downpay2})]&type=topic&readdown=downpay", function (html) {
                Dialog2(html);
            });
        }
    });

    var login_ok;
    function paydown(){
        $.post("/topic/paydown/[(${topic.topicid})]", function(data) {
            if (data > 0) {
                location.href = "/downtopic.htm?topicid=[(${topic.topicid})]";
            } else if (data == -11) {
                login_ok = function(){
                    paydown();
                }
                login_f();
            } else if (data == -13) {
                Message("您没有下载权限。", "提示");
            } else if (data == -14) {
                Message("今天下载数量已超，请明天再来下载。", "提示");
            } else if (data == -1) {
                Dialog("积分不足，去充值？", "提示", function() {
                    location = "/user/glodpay";
                });
            } else if (data == -12) {
                Message("文档不存在。", "提示");
            } else {
                //出错了
            }
        });
    }

    $(".comment-post .btn").click(function(e) {
        e.preventDefault();

        var comment = ue.getContent();
        if (comment == '') {
            Message('请输入评论内容');
            return false;
        }

        var $this = $(this);
        if ($this.hasClass("doing"))
            return;
        $this.addClass("doing");
        $.post('/topic/comment', {
            topicid:[(${topic.topicid})],
            comment: comment
        }, function(data) {
            if (data == "-1") {
                ShowTip('评论失败');
            } else {
                ShowTip('评论已提交');
            }
            location = location;
            $this.removeClass("doing");
        });
    });
</script>